<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">校区库存设置</div>
        </div>

        <div class="widget-body  am-fr">
          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <el-select
                v-model="query.campusId"
                placeholder="校区"
                clearable
              >
                <el-option
                  v-for="(item, index) in busTeams"
                  :key="index"
                  :value="item.campusId"
                  :label="item.campusName"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="am-u-sm-8 am-u-md-8 am-u-lg-2">
            <div class="am-form-group">
              <el-select
                v-model="query.type"
                placeholder="请选择库存类别"
                clearable
              >
                <el-option
                  value="0"
                  label="地推"
                ></el-option>
                <el-option
                  value="1"
                  label="到店物料"
                ></el-option>
                <el-option
                  value="2"
                  label="报读礼品"
                ></el-option>
                <el-option
                  value="3"
                  label="旧带新礼品"
                ></el-option>
                <el-option
                  value="4"
                  label="门店展示"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <el-input
                placeholder="物料名称"
                v-model="query.materialName"
              />
            </div>
          </div>

          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <el-select
                placeholder="请选择上下架状态"
                v-model="query.shelvesStatus"
                clearable
              >
                <el-option
                  value="1"
                  label="上架"
                ></el-option>
                <el-option
                  value="0"
                  label="下架"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
            <div class="am-form-group">
              <el-date-picker
                v-model="dateArr"
                type="daterange"
                placeholder="选择日期范围"
                :clearable="false"
                :editable="false"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="am-u-sm-20 am-u-md-20 am-u-lg-8 am-u-end">
            <div class="am-form-group">
              <button
                @click="handleSearch"
                type="button"
                class="am-btn am-btn-default am-btn-success"
              ><span class="am-icon-search"></span>查询
              </button>

              <button
                @click="goExport"
                type="button"
                class="am-btn am-btn-default am-btn-success"
              >导出
              </button>
            </div>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              empty-text="暂无数据"
              stripe
              style="min-width: 100%"
            >
              <el-table-column
                min-width="100"
                prop="areaTeamName"
                label="区域"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                prop="type"
                label="类别"
              >
                <template scope="scope">
                  <div>{{{'0': '地推','1': '到店物料','2': '报读礼品','3': '旧带新礼品','4': '门店展示'}[scope.row.type]}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="activityName"
                label="关联活动"
              >
              </el-table-column>
              <el-table-column
                min-width="300"
                prop="periodNames"
                label="关联期数"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="campusName"
                label="校区"
              >

              </el-table-column>
              <el-table-column
                min-width="200"
                prop="materialName"
                label="物料名称"
              >
              </el-table-column>
              <el-table-column
                min-width="200"
                prop="unitPrice"
                label="大概单价"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                label="用途"
                prop="useMsg"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                label="初次预数"
                prop="firstUseAdvance"
              >
                <template scope="scope">
                  <el-input-number
                    v-if="editData[scope.row.activityCampusInventoryId]"
                    :controls="false"
                    :disabled="scope.row.disabledEdit || !hasPermission('fist')"
                    v-model="editData[scope.row.activityCampusInventoryId].firstUseAdvance"
                    style="width:100%"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                min-width="150"
                label="加预数"
              >
                <template scope="scope">
                  <el-input-number
                    v-if="editData[scope.row.activityCampusInventoryId]"
                    :controls="false"
                    :disabled="scope.row.disabledEdit || !hasPermission('add')"
                    v-model="editData[scope.row.activityCampusInventoryId].addUseAdvance"
                    style="width:100%"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                min-width="150"
                label="特殊尺寸"
              >
                <template scope="scope">
                  <el-input
                    v-if="editData[scope.row.activityCampusInventoryId]"
                    v-model="editData[scope.row.activityCampusInventoryId].specialSize"
                    :disabled="scope.row.disabledEdit"
                    style="width:100%"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                min-width="150"
                label="物料使用反馈"
              >
                <template scope="scope">
                  <el-input
                    v-if="editData[scope.row.activityCampusInventoryId]"
                    v-model="editData[scope.row.activityCampusInventoryId].useFeedback"
                    :disabled="scope.row.disabledEdit"
                    style="width:100%"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                min-width="150"
                label="额外使用量"
              >
                <template scope="scope">
                  <el-input-number
                    v-if="editData[scope.row.activityCampusInventoryId]"
                    v-model="editData[scope.row.activityCampusInventoryId].otherUseAdvance"
                    :controls="false"
                    :disabled="scope.row.disabledEdit || !hasPermission('other')"
                    style="width:100%"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                label="预约量"
                prop="allocatedQuantity"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                label="余数"
              >
                <template scope="scope">
                  <div>{{countLess(scope.row)}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                label="上架状态"
              >
                <template scope="scope">
                  <div>{{{'0':'下架', '1':'上架'}[scope.row.shelvesStatus]}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="150"
                label="创建时间"
              >
                <template scope="scope">
                  <div>{{scope.row.createTime | formatDate}}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="100"
                label="操作"
                fixed="right"
              >
                <template scope="scope">
                  <div>
                    <el-button @click="changeEdit(scope.row)">{{scope.row.disabledEdit ? '编辑' : '保存'}}</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination
              v-bind:total="total"
              v-bind:pageNo="pageNo"
              v-bind:pageSize="pageSize"
              @paging="loadTableData"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import io from '../../lib/io'
import Pagination from '../base/Pagination.vue'
import moment from 'moment'
export default {
  data: function() {
    return {
      total: 0,
      pageSize: 10,
      pageNo: 1,
      tableData: [{}],
      query: {
        campusId: '',
        type: '',
        materialName: '',
        shelvesStatus: ''
      },
      editData: {},
      dateArr: [moment().startOf('month'), moment().endOf('month')]
    }
  },
  components: {
    Pagination
  },
  watch: {},
  computed: {
    areaTeams() {
      let options = (this.$root.config.areaTeams || []).map(item => {
        if (!this.query.areaTeamId) {
          this.query.areaTeamId = item.areaTeamId
        }
        return { value: item.areaTeamId, text: item.name }
      })
      return options
    },
    busTeams: function() {
      let list = this.$root.config.campusList
      return list
    }
  },
  created() {
    // let { activityInventorySettingId } = this.$route.query
    // this.query.activityInventorySettingId = activityInventorySettingId
    this.loadTableData()
  },
  methods: {
    countLess(row) {
      let res =
        Number(row.firstUseAdvance) +
        Number(row.addUseAdvance) -
        Number(row.otherUseAdvance) -
        Number(row.allocatedQuantity)
      return res > 0 ? res : 0
    },
    changeStatus(item) {
      let index = 0
      for (let i of this.tableData) {
        if (i.activityCampusInventoryId === item.activityCampusInventoryId) {
          i.disabledEdit = !i.disabledEdit
          break
        }
        index++
      }
      this.$set(this.tableData, index, this.tableData[index])
    },
    changeEdit(item) {
      if (!item.disabledEdit) {
        io.post(
          io.updateActivityCampusInventory,
          {
            ...this.editData[item.activityCampusInventoryId],
            activityCampusInventoryId: item.activityCampusInventoryId
          },
          ret => {
            if (ret.success) {
              this.changeStatus(item)
              this.loadTableData()
            } else {
              this.$alert(ret.desc)
            }
          }
        )
      } else {
        this.changeStatus(item)
      }
    },
    handleSearch() {
      this.loadTableData(1)
    },
    goExport() {
      io.downloadFile(
        io.exportActivityCampusInventory,
        this.formatData(),
        res => {}
      )
    },
    formatData() {
      return {
        campusId: this.query.campusId,
        type: this.query.type,
        materialName: this.query.materialName,
        shelvesStatus: this.query.shelvesStatus,
        startDate:
          this.dateArr.length > 0 && this.dateArr[0]
            ? moment(this.dateArr[0]).format('YYYY-MM-DD')
            : '',
        endDate:
          this.dateArr.length > 0 && this.dateArr[1]
            ? moment(this.dateArr[1]).format('YYYY-MM-DD')
            : ''
      }
    },
    loadTableData(pageNo) {
      this.pageNo = pageNo || this.pageNo || 1
      this.$showLoading()
      io.post(
        io.activityCampusInventoryDetail,
        {
          ...this.formatData(),
          pageNo: this.pageNo,
          pageSize: this.pageSize
        },
        ret => {
          this.$hiddenLoading()
          if (ret.success) {
            this.editData = {}
            this.tableData = ret.data.list
            this.tableData.forEach(item => {
              item.disabledEdit = true
              let {
                useFeedback,
                firstUseAdvance,
                addUseAdvance,
                otherUseAdvance,
                specialSize
              } = item
              this.editData[item.activityCampusInventoryId] = {
                useFeedback,
                firstUseAdvance,
                addUseAdvance,
                otherUseAdvance,
                specialSize
              }
            })
            this.total = ret.data.total
          } else {
            this.$alert(ret.desc)
          }
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.tableImage {
  width: 80px;
}
.itemBox {
  float: left;
  width: 300px;
}
</style>
